<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <meta content="emai=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/willbe/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="/willbe/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/willbe/css/coupon.css" />
    <link rel="stylesheet" type="text/css" href="/willbe/css/form.css" />
    <script src="/willbe/js/zepto-1.1.6.js" type="text/javascript"></script>
    <script src="/willbe/js/common.js" type="text/javascript"></script>
    <title>输入个人信息</title>
</head>
<body>
    <form action="/activity/save" method="post">
        <header class="userinfo">
            <ul>
                <li class="flex-wrapper flex-align-center">
                    <label>姓名</label>
                    <p class="flex-1">
                        <input type="text" name="name" id="name" value="" data-message="姓名不能为空" />
                    </p>
                </li>
                <li class="flex-wrapper flex-align-center">
                    <label>手机</label>
                    <p class="flex-1">
                        <input type="tel" name="telephone" id="telephone" value="" data-message="手机不能为空" />
                    </p>
                </li>
                <li class="flex-wrapper">
                    <label>地址</label>
                    <div class="flex-1">
                        <div class="flex-wrapper flex-pack-justify">
                            <select id="province" name="province" data-message="省不能为空">
                                <option selected="selected" value="">省</option>
                                <?php foreach ($province as $value): ?>
                            	<option value="<?php echo $value['id'];?>"><?php echo $value['province_name'];?></option>
                            	<?php endforeach;?>
                            </select>
                            <select id="city" name="city" data-message="市不能为空">
                                <option value="">市</option>
                            </select>
                            <select id="district" name="district" data-message="区不能为空">
                                <option value="">区</option>
                            </select>
                        </div>
                        <input type="text" name="address" id="address" placeholder="详细地址" data-message="详细地址不能为空" value="" />
                    </div>
                </li>
            </ul>
        </header>
        <button class="btn" type="submit">提 交</button>
    </form>

    <script>
        Zepto(function ($) {
            baiaimama.validated = true;
            $("button[type='submit']").click(function (e) {
                baiaimama.validated = true;
                e.preventDefault();
                validateInput("name");
                validateInput("telephone");
                validatePhone("telephone");
                validateSelect("province");
                validateSelect("city");
                //validateSelect("district");
                validateInput("address");
                if (baiaimama.validated) $("form").submit();
            });

            $("#province").change(function (e) {
                var val = $("#province").val();
                $.post('/cooperateform/ajaxcitysbyprovincesid', { 'value': val }, function (res) {
                    var list_length = res.data.length;
                    var html = '<option value="">市</option>';
                    if (list_length > 0) {
                        for (var i = 0; i < list_length; i++) {
                            var data = res.data[i];
                            html += '<option value=' + data.id + '>' + data.city_name + '</option>';
                        }
                        $('#city').html(html);
                        var html1 = '<option value="">区</option>';
                        $('#district').html(html1);
                    }
                }, 'json');
            });

            $("#city").change(function (e) {
                var val = $("#city").val();
                $.post('/cooperateform/ajaxareasbycityid', { 'value': val }, function (res) {
                    var list_length = res.data.length;
                    var html = '<option value="">区</option>';
                    if (list_length > 0) {
                        for (var i = 0; i < list_length; i++) {
                            var data = res.data[i];
                            html += '<option value=' + data.id + '>' + data.district_name + '</option>';
                        }
                        $('#district').html(html);
                    }
                }, 'json');
            });
        });
    </script>
</body>

</html>
